<script setup lang="ts">
import { ref, reactive } from 'vue'

const { searchTitle, placeholder, inputValue, shape } = defineProps({
	inputValue: {
		type: String,
	},
	searchTitle: {
		type: String,
	},
	placeholder: {
		type: String,
		default: '输入要搜索的英雄名',
	},
	shape: {
		type: String,
		default: 'round',
	},
})

const emits = defineEmits(['update:inputValue'])

const inputRef = ref<HTMLOrSVGElement>(),
	modelInputValue = ref<string>(inputValue as string)
const inputChange = (value: string | number) => {
		emits('update:inputValue', value)
	},
	handle_focusOnInput = () => {
		inputRef.value?.focus()
	},
	handle_search = () => {}
</script>
<template>
	<div
		class="search-bar w-2/4 flex justify-between items-center"
		:style="shape == 'round' ? 'border-radius:50px;' : 'border-radius:5px;'"
	>
		<slot name="head"></slot>
		<div class="flex-1">
			<div
				class="inline-block cursor-pointer mb-1 subpixel-antialiased"
				@click="handle_focusOnInput"
			>
				<span class="search-input-title" v-if="searchTitle">{{
					searchTitle
				}}</span>
				<slot name="title"></slot>
			</div>
			<el-input
				ref="inputRef"
				class="z-50"
				v-model="modelInputValue"
				:placeholder="placeholder"
				:autofocus="true"
				size="default"
				@change="inputChange"
			></el-input>
		</div>
		<div class="search-img cursor-pointer" @click="handle_search">
			<img
				class="w-full h-full"
				src="src/static/component/search.png"
				alt="search"
			/>
			<slot name="selectBtn"></slot>
		</div>
	</div>
</template>

<style lang="scss" scoped>
@import './style.scss';
</style>
